<template>
    <div class="mail">
      <div>
        <el-input
          placeholder="请输入搜索联系人"
          suffix-icon="el-icon-search"
          v-model="searchInput"
        @change="handleSearch">
        </el-input>
        <span class="total">共有{{getLength}}个联系人</span>
      </div>
      <div>
        <el-radio-group v-model="mailRadio" @change="radioChange">
          <el-radio label=" ">所有联系人</el-radio>
          <el-radio label="家人">家人</el-radio>
          <el-radio label="朋友">朋友</el-radio>
          <el-radio label="同学">同学</el-radio>
          <el-radio label="同事">同事</el-radio>
        </el-radio-group>
      </div>
      <div class="mail-list">
        <div class="mail-list-item" v-for="item in getMailList">
          <div class="pic">
            <img src="../assets/timg.jpg" alt="头像">
          </div>
          <div class="info">
            <el-input v-if="item.isModify" size="mini" v-model="item.name"></el-input>
            <span class="name" v-else>{{item.name}}</span><br>
            <el-input v-if="item.isModify" size="mini" v-model="item.tel"></el-input>
            <span class="tel" v-else>{{item.tel}}</span>


          </div>
          <div class="operate">
            <span v-if="item.isModify" class="el-icon-check" @click="handleConfirm(item)"></span>
            <span v-else class="el-icon-edit edit" @click="handleEdit(item.id)"></span>
            <span v-if="item.isModify" class="el-icon-close" @click="handleConsel(item.id)"></span>
            <span v-else class="el-icon-delete del" @click="handleDelete(item.id)"></span>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import { Message } from 'element-ui';
  import { mapGetters,mapMutations,mapActions } from 'vuex'
    export default {
        name: "mail",
        data() {
            return {
              searchInput:'',
              mailRadio:" ",
              currentUserId:JSON.parse(window.localStorage.getItem('logInfo')).id+''
            }
        },
        methods: {
          ...mapMutations(['search','modifyShow','setMailList']),
          ...mapActions(['modifyContent','delete']),
          getData(data){
            this.$http.toGet('mail/queryAll/'+JSON.stringify(data))
              .then(resp => {
                if(resp.resultCode===0){
                  this.setMailList( resp.data.list.map(item => {
                    item.isModify = false;
                    return item;
                  }));
                }
            })
          },
          handleSearch(){
            //搜索操作
            const params={
              userId:this.currentUserId,
              nickname:this.searchInput,
              cate:this.mailRadio
            };
            this.getData(params)
          },
          radioChange(index){
            //请求数据进行页面的渲染
            const params={
              userId:this.currentUserId,
              cate:index
            };
            this.getData(params)
          },
          handleEdit(id){
            //修改内容
            this.modifyShow(id);
          },
          handleConfirm(item){
            //确认操作
            this.modifyContent(item)
              .then(resp=>{
                console.log(resp);
                if(resp.resultCode===0) {
                  this.modifyShow(item.id);
                }
              })
          },
          handleConsel(id){
            //取消操作
            this.modifyShow(id);
          },
          handleDelete(id) {
            //删除操作
            this.$http.toDel('mail/delete/'+id)
              .then(resp=>{
                if(resp.resultCode===0) {
                  this.getData({"userId": this.currentUserId, cate: this.mailRadio})
                  Message.success({message:"删除成功",duration:'2000'})
                }else{
                  Message.error({message:"删除失败",duration:'2000'})
                }
              })
          },
        },
        computed: {
          ...mapGetters(['getMailList','getLength']),
        },
        components: {},
        mounted() {
          this.getData({"userId":this.currentUserId ,cate:this.mailRadio});
        }
    }
</script>

<style lang="less" scoped>
  .mail{
    width: 80%;
    margin: 0 auto;
    margin-top: 5%;
    .total{
      height: 30px;
      line-height: 30px;
      font-size: 12px;
      color: #606266;
      margin: 5px 3px;
      display: inline-block;

    }
    .mail-list{
      width:100%;
      padding-top: 30px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap:wrap;
      /*column-width:auto;*/
      column-count:2;
      .mail-list-item{
        width: 30%;
        display: flex;
        margin-bottom: 16px;
        .pic{
          flex: 1;
          img{
            width: 50px;
            height: 50px;
            border-radius: 50%;
          }
        }
        .info{
          flex: 2;
          span{
            display: inline-block;
            height: 20px;
            line-height: 20px;
            color: #606266;
            font-size: 14px;
            margin-top: 5px;
            margin-left: 8px;
          }
          .el-input--mini{
            width: 90%;
            margin-top: 5px;
            margin-left: 8px;
            input{
              height: 20px;
              line-height: 20px;
              color: #606266;
              font-size: 14px;
            }
          }
          .name{
            font-weight: bold;
          }
        }
        .operate{
          flex: 1.5;
          line-height: 52px;
          span{
            cursor: pointer;
            font-weight: bold;
            color:#0F87EA;
          }
          .del{
            color: #F73D3A;
          }
        }

      }
    }
  }

</style>
